<template>
    <div id="platform">
        <topComponent></topComponent>
        <el-card class="box-card">
            <el-row>
                <el-col :span="12">
                    <el-statistic  title="投资任务进度">
                        <template slot="formatter">
                            <div style="margin-bottom: 10px;color: #409EFF;">
                                {{decision_making_index}}/{{experiment_decision_making_count}}
                            </div>
                            <el-progress :width=80 type="circle" :percentage="parseFloat(((decision_making_index / experiment_decision_making_count)*100).toFixed(2))"/> 
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="12">
                    <el-statistic  title="当前实验的剩余时间">
                        <template slot="formatter">
                            <div style="margin-bottom: 10px;color: #409EFF;">
                                {{experiment_least_time_show}}
                            </div>
                            <el-progress :width=80 type="circle" :percentage="parseFloat(((experiment_least_time / 900)*100).toFixed(2))"/> 
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </el-card>
        <component :is="component_name" :key="component_flush"></component>
        <el-button style="margin-bottom: 10%;" type="primary" @click="process_control">确认</el-button>
    </div>
</template>
  
<script>
import topComponent from '../components/top-component.vue'
import allocate from '../components/allocate.vue'
import checkResultTrend from '../components/check-result-trend.vue'
export default {
    name: 'platform',
    components:{
        topComponent,
        allocate,
        checkResultTrend
    },
    data(){
        return{
            decision_making_index:null,
            experiment_decision_making_count:null,
            experiment_least_time:null,
            experiment_least_time_show:null,
            timer:null,
            component_name:'allocate',
            component_flush:'1'
        }
    },
    methods:{
        calculate_least_time(){
            if(this.experiment_least_time == 0){
                clearInterval(this.timer)
                const h = this.$createElement;
                    this.$message({
                        message: h('p', null, [
                            h('span', null, '超时提示'),
                            h('b', { style: 'color: red' }, '实验时长超过最大时长，实验结束')
                        ])
                    });   
                this.$router.push('/')
            }
            this.experiment_least_time --
            let minutes = parseInt(this.experiment_least_time / 60)
            let seconds = this.experiment_least_time % 60
            this.experiment_least_time_show = minutes + ":" + seconds
        },
        process_control(){
            if(this.component_name=='allocate'){
                this.component_name = 'checkResultTrend'
            }else{
                if(this.decision_making_index<this.$global_data.experiment_decision_making_count){
                    this.decision_making_index++
                    this.$global_data.decision_making_index=this.decision_making_index
                    this.component_name = 'allocate'
                }else{
                    clearInterval(this.timer)
                    this.$router.push('/result')
                }
            }
            this.component_flush = new Date().getTime()
        },
        platfrom_data_init(){
            this.decision_making_index = this.$global_data.decision_making_index
            this.experiment_decision_making_count = this.$global_data.experiment_decision_making_count
            this.experiment_least_time = this.$global_data.experiment_least_time
        }
    },
    mounted(){
        this.timer = setInterval(this.calculate_least_time,1000)
    },
    beforeMount(){
        this.platfrom_data_init()
    },
    beforeDestroy(){
        clearInterval(this.timer)
    }
}
</script>
<style>
#platform{
    width: 100%;
    height: 100%;
    position: absolute;
}
</style>